import React from 'react';
import { Form, Input, Modal } from 'antd';
import { connect } from 'dva';
import HashUtil from '@/utils/HashUtil';
import  { GM as namespaceGM } from "@/constants/ModelNamespaces";

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 }
  }
};

interface GmEditPwdProps{
  handleOK: (item:any)=>void;
  handleCancel: ()=>void;
  form: any;
  state: any;
  loading:boolean;
}


class EditPwdView extends React.Component<GmEditPwdProps,any> {
  //提交
  handleOk = () => {
    //1.收集表单数据
    const form = this.props.form;
    //先执行默认校验.
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      //添加必填字段的默认值.
      // console.log('gm addView.formdata:', values);
      values.password = HashUtil.md5(values.password);//密码加密后传给后台.
      values.repassword = undefined;//删除这个属性.repassword是没加密的.
      this.props.handleOK(values);

      // form.resetFields();//重置表单

      // this.props.handleCancel();//隐藏视图
    });

  }
  /**
   * 检查前后密码是否一致.
   */
  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;

    const errors = [];
    if (value && value !== form.getFieldValue('password')) {
      errors.push(new Error('前后输入的密码不一致!'));
      callback(errors);//这里也可以直接塞一个error或者错误信息的string进去.
    } else {
      callback();
    }
  }

  render() {
    const { state,loading, form } = this.props;
    const { getFieldDecorator } = form;
    console.log('edit pwd view state', state);
    return (
      <Modal
        visible={state.visible}
        title="修改密码"
        okText="提交"
        onOk={this.handleOk}
        onCancel={this.props.handleCancel}
        destroyOnClose={true}
        confirmLoading={loading}
      >
        <Form layout="vertical" autoComplete="off">
          <Form.Item style={{ display: 'none' }} {...formItemLayout}>
            {getFieldDecorator('id', {
              initialValue: state.currId
            })(
              <Input size="small" />
            )}
          </Form.Item>
          <Form.Item label="密码" {...formItemLayout}>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '请输入密码' },
              { max: 100, message: '最大长度100' }]
            })(
              <Input type="password" placeholder="请输入密码" size="small" autoComplete="off"/>
            )}
          </Form.Item>
          <Form.Item label="确认密码" {...formItemLayout}>
            {getFieldDecorator('repassword', {
              rules: [{ required: true, message: '请确认密码' },
              { max: 100, message: '最大长度100' },
              { validator: this.compareToFirstPassword }]
            })(
              <Input type="password" placeholder="请确认密码" size="small" autoComplete="off"/>
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

//###########下面是容器组件,上面是展示组件##############

const mapStateToProps = (state) => {
  return {
    state: state[namespaceGM].editPwdView,
    loading: state.loading.models.gm
  };
};

const mapDispatchToProps = (dispatch, ) => {
  return {
    dispatch: dispatch,
    handleOK: item => {
      dispatch({ type: `${namespaceGM}/editPasswd`, payload: item });
    },
    //隐藏视图
    handleCancel: () => {
      dispatch({ type: `${namespaceGM}/toggleEditPwdView`, payload: { editPwdView: { visible: false, currId: null } } });
    }
  };
};

//把View使用Form组件重新包装下.//解决了getFieldDecorator无法定义;
let formedEditPwdView = Form.create()(EditPwdView);

export default connect(mapStateToProps, mapDispatchToProps)(formedEditPwdView);

